<script setup>
import { reactive, ref, nextTick,getCurrentInstance } from 'vue'
import { boxListDetail,getUserWallet } from '../../http/api.js'
import { useRoute,useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
let numberExchange = ref(proxy.$numberExchange)
import prizePopup from '../../components/prizePopup/index.vue'
import { giftListDetail, buyEgg } from '../../http/api'
import { useI18n } from 'vue-i18n'
// import { ElMessage } from 'element-plus'
const { $t } = proxy;
const { locale } = useI18n()

const baseUrl = ref(import.meta.env.VITE_APP_BASE_URL)
// 用户信息对象
let userInfo = ref(undefined)
const $route = useRoute()
const $router = useRouter()
// 获取用户钱包信息
const getUserWalletFn = async()=>{
    let res = await getUserWallet()
    console.log(res,'res进去了49')
    if(res.code === 200){
        nextTick(()=>{
            userInfo.value.balance = res.result.balance
        })
    }
}
// 判断用户是否登录
let userInfos = localStorage.getItem('userInfo')
if (userInfos) {
    userInfo.value = JSON.parse(userInfos)
    getUserWalletFn()

}
const value = ref('')
const options = reactive([
    {
        value: 'Option1',
        label: '最受欢迎',
    },
    {
        value: 'Option2',
        label: '最受欢迎',
    },
    {
        value: 'Option3',
        label: '最受欢迎',
    }
])


const scrollTop = ref(0)
//返回顶部
const backTop = () => {
    nextTick(() => {

        //使用定时器设置滑动过渡效果
        let timer = setInterval(() => {
            let ispeed = Math.floor(-scrollTop.value / 5)
            document.documentElement.scrollTop = document.body.scrollTop =
                scrollTop.value + ispeed
            if (scrollTop.value === 0) {
                clearInterval(timer)
            }
        }, 16)
    })

}
backTop()
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/raffle/${name}`, import.meta.url).href
}
// 获取图片路径资源
const getImageUrlHome = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
// 扭蛋分类数组
let eggSortInfoList = reactive({ data: {} })

let maskShow2 = ref(false)

let isShowChance = ref(true)

// 获取扭蛋详情
const getboxListDetailFunc = async () => {
    // return
    let res = await boxListDetail({ boxId: $route.query.id })
    console.log(res, '$route')
    if(res.success){
        eggSortInfoList.data = res.result
    }else{
        ElMessage.error(res.message)
        setTimeout(()=>{
            $router.go(-1)
        },2000)
    }

}
//抽奖动画控制变量
let choujiangShow = ref(false)
getboxListDetailFunc()

let maskShow3 = ref(false)
let detailInfo = reactive({ data: {} })
// 获取礼品详情
const giftListDetailFunc = async (giftId) => {
    let res = await giftListDetail({ giftId })
    console.log(res, '礼品详情')
    if (res) {
        detailInfo.data = res
        maskShow3.value = true
        console.log(detailInfo.data, '礼品详情22')
    }
}
// 子组件返回的关闭弹窗事件回调
const maskShow2Change = (val) => {
    maskShow3.value = val
}
let winPrize = reactive({
    data: {}
})

let isClicked = ref(false);
const header = ref()

// 扭一扭点击
const buyEggClick = () => {

    if (!userInfo.value) {
        console.log('请先登录',header.value);
        header.value.loginShow()
        return ElMessage.warning(`${$t('msg.message.PleaseLog')}！`);
    }
    if (isClicked.value) {
        return;
    }
    if (userInfo.value.balance < eggSortInfoList.data.price) {
        ElMessage.warning(`${$t('msg.message.goToRecharge')}！`);
        $router.push({ name: 'personCenter', query: { pageIndex: '7' } });
        return;
    }
    
    isClicked.value = true;
    choujiangShow.value = true;

    setTimeout(async () => {
        try {
            let res = await buyEgg({ boxId: $route.query.id });
            console.log(res, '扭蛋扭的结果');
            if (res.success) {
                getUserWalletFn();
                winPrize.data = res.result;
                maskShow2.value = true;
            } else {
                let mesg = res.message;
                if (res.message === "user wallet balance is not enough") {
                    mesg = $t('msg.message.goToRecharge') + '！';
                    $router.push({ name: 'personCenter', query: { pageIndex: '7' } });
                }
                ElMessage.error(mesg);
            }
        } finally {
            choujiangShow.value = false;
            isClicked.value = false;
        }
    }, 2000);
};
//子组件登录返回事件
const loginEmit = (res) => {
    userInfo.value = res
    getUserWalletFn()
    console.log(res, 'reszizujian')
}
// 再抽一次
const oneMoreGet = () => {
    maskShow2.value = false
    buyEggClick()
}
let isDark = ref(true)
if(localStorage.getItem('isDark') !== undefined){
    isDark.value = localStorage.getItem('isDark') === 'true' ? true : false
}
// 子组件返回的切换主题颜色
const changeIsDarkEmit = (val) => {
    isDark.value = val
}
</script>

<template>
    <prizePopup :detailInfo="detailInfo.data" :isShow="false" @maskShow2Change="maskShow2Change" :maskShow2="maskShow3">
    </prizePopup>
    <div class="homeBody"  :style="{ background: isDark ? `url(${getImageUrlHome('bg.png')})` : `url(${getImageUrlHome('bg2.png')})` }">
        <headNavigation ref="header"  @changeIsDarkEmit="changeIsDarkEmit"  :isDark="isDark" :userInfo="userInfo" @loginEmit="loginEmit"></headNavigation>
        <div class="raffleBig">
            <img class="raffleBigBanner" src="../../assets/img/raffle/banner.png" alt="">
            <div class="raffle">
                <div class="raffleTop">
                    <img class="eggBtn" style="z-index: 10;" @click="buyEggClick"
                        src="../../assets/img/raffle/eggBtn.png" alt="">
                    <div :class="locale === 'en' ? 'eggBtnItemBig' : 'eggBtnItem'" style="z-index: 10;left: 89px;">
                        <img src="../../assets/img/raffle/Frame3328.png" alt="">
                        <div>{{$t('msg.message.Extractable')}} {{userInfo && userInfo.balance ? numberExchange(parseInt(userInfo.balance / eggSortInfoList.data.price)) : 0 }} {{$t('msg.message.second')}}</div>
                    </div>

                </div>
                <div :class="locale !== 'en' ?  'raffleBot' : 'raffleBot raffleBotBig'" style="z-index: 10;">
                    <div class="raffleBotL">
                        <div style="color: red;" >{{$t('msg.message.ConsumerTwistedCoins')}}{{numberExchange(eggSortInfoList.data.price)  }}</div>
                        <img src="../../assets/img/header/money.png" alt="">
                    </div>
                    <!-- <div class="raffleBotR">
                        <img src="../../assets/img/raffle/add.png" alt="">
                        <div class="pl5" style="color: greenyellow;">经验值 100 </div>
                    </div> -->
                </div>

            </div>
            <div class="choujianBox">
                <img src="../../assets/img/raffle/light.png"
                    :class="choujiangShow ? 'changeBig changeBigs' : 'changeBigs'" alt="">
                <div class="fala">
                    <!-- <img style="left: 0;height: 90%"  src="" alt=""> -->
                    <div>{{ eggSortInfoList.data.name }}</div>
                </div>
                <img src="../../assets/img/raffle/eggMBody.png" class="eggmbody" alt="">
                <div class="falaliBox">
                    <img :class="choujiangShow ? 'changeBig2 changeBig2s' : 'changeBig2s'"
                        src="../../assets/img/personCenter/falaliEgg.png" alt="">
                    <img :class="choujiangShow ? 'changeBig2 changeBig2ss' : 'changeBig2ss'"
                        src="../../assets/img/personCenter/falaliEgg.png" alt="">
                    <img :class="choujiangShow ? 'changeBig2 changeBig2sss' : 'changeBig2sss'"
                        src="../../assets/img/personCenter/falaliEgg.png" alt="">
                    <img :class="choujiangShow ? 'changeBig2 changeBig2ssa' : 'changeBig2ssa'"
                        src="../../assets/img/personCenter/falaliEgg.png" alt="">

                </div>
                <div class="botImgBox">
                    <div :class="choujiangShow ? 'changeTop2 change1' : 'change1'">
                        <img :src="eggSortInfoList.data?.giftList?.length ? baseUrl+'/'+ eggSortInfoList.data.giftList[0].img : '../../assets/vue.svg'" class="changeImgs" alt="">
                        <img src="../../assets/img/raffle/blueEggBot.png" class="blueEggBot" alt="">
                    </div>
                    <div :class="choujiangShow ? 'changeTop2 change2' : 'change2'">
                        <img :src="eggSortInfoList.data?.giftList?.length >= 2 ? baseUrl+'/'+ eggSortInfoList.data.giftList[1].img : '../../assets/vue.svg'" class="changeImgs" alt="">
                        <img src="../../assets/img/raffle/blueEggBot.png" class="blueEggBot" alt="">
                    </div>
                    <div :class="choujiangShow ? 'changeTop change3' : 'change3'">
                        <img :src="eggSortInfoList.data?.giftList?.length >= 3 ? baseUrl+'/'+ eggSortInfoList.data.giftList[2].img : '../../assets/vue.svg'" class="changeImgs" alt="">
                        <img src="../../assets/img/raffle/blueEggBot.png" class="blueEggBot" alt="">
                    </div>
                    <div :class="choujiangShow ? 'changeTop change4' : 'change4'">
                        <img :src="eggSortInfoList.data?.giftList?.length >= 4 ? baseUrl+'/'+ eggSortInfoList.data.giftList[3].img : '../../assets/vue.svg'" class="changeImgs" alt="">
                        <img src="../../assets/img/raffle/blueEggBot.png" class="blueEggBot" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="modelTop padtop40">
            <div class="nowEggPng" style="width: 795px;">
                <div class="nowEggPngDiv top16">
                    <div class="jiantoubox">
                        <div :style="{ color: isDark ? '#fff' : '#282828' }">{{$t('msg.message.WhatCanYouGet')}}</div>
                        <img class="jiantou" :src="isDark ? getImageUrlHome('whitejiantou.png') : getImageUrlHome('blackjiantou.png')" alt="">
                    </div>
                </div>
                <img :src="getImageUrlHome('title.png')" alt="">
            </div>
            <!-- <div class="nowEggPng">
                <div :style="{color:isDark?'#fff':'#000'}" :class="locale === 'en' ?  'nowEggPngDiv nowW600' : 'nowEggPngDiv'">
                    <div>{{$t('msg.message.WhatCanYouGet')}}</div>
                </div>
                <img src="../../assets/img/raffle/topTitleBg.png" alt="">
            </div> -->
            <div class="searchBoxBig">
                <div class="findMoreBtn" :style="{color:isDark?'#fff':'#000'}" @click="isShowChance = !isShowChance">{{ isShowChance ? $t('msg.message.HiddenProbability') : $t('msg.message.showProbability') }}
                </div>
                <!-- <el-select v-model="value" class="m-2 selectClass" placeholder="最受欢迎">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="searchBox">
                    <el-input v-model="input2" placeholder="搜索心仪扭蛋..." /> -->
                <!-- <input type="text" placeholder="搜索你想要的..."> -->
                <!-- <div class="imgBox">
                        <img src="../../assets/img/home/search.png" alt="">
                    </div>
                </div> -->
            </div>
        </div>
        <div class="eggSortInfo" v-if="eggSortInfoList.data.giftList">
            <div class="eggSortInfoitem"  v-for="(item, index) in eggSortInfoList.data.giftList"
                @click="giftListDetailFunc(item.id)" :key="index">
                <div class="eggSortInfoitemImg">
                    <img :src="baseUrl + '/sys/common/static/' + item.img" alt="">
                </div>
                <div class="eggSortInfoitemMsg">
                    <div class="eggSortInfoitemMsgL">
                        <div class="eggSortInfoitemMsgLText">
                            {{ item.name }}
                        </div>
                        <div class="eggSortInfoitemMsgLBottom">
                            <img src="../../assets/img/header/money.png" alt="">
                            <div>{{ numberExchange(item.val) }}</div>
                        </div>
                    </div>
                    <!-- <div class="findMoreBtn" >发现更多</div> -->
                </div>
                <img src="../../assets/img/raffle/blackBg.png" class="blackBg" alt="">
                <div class="levelImgBox">
                    <div class="imgleave">
                        <img :src="item.type === 'EPIC' ? getImageUrl('1.png') : item.type === 'RARE' ? getImageUrl('2.png') : item.type === 'UNCOMMON' ? getImageUrl('3.png') : getImageUrl('4.png')"
                            alt="">
                        <div>{{ item.typeName }}</div>
                    </div>
                    <div style="background: #3E3E3E;" class="pad10" v-show="isShowChance">{{$t('msg.message.probability')}}：{{item.getProbability}}%</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 中奖弹窗 -->
    <div class="mask" v-show="maskShow2" style="z-index: 100;">
        <div class="dialog">
            <div class="winAPrizeBig">
                <div class="winAPrizeTop">
                    <div>{{$t('msg.message.NewlyObtained')}}</div>
                    <img src="../../assets/img/raffle/close.png" @click="maskShow2 = false" alt="">
                </div>
                <div class="winAPrizeImg">
                    <img :src="baseUrl + '/' + winPrize.data.img" alt="">
                </div>
                <div class="winAPrizeMain">
                    <div class="winAPrizeName">{{ winPrize.data.name }}</div>
                    <div class="winAPrizeMoney">
                        <img src="../../assets/img/header/money.png" alt="">
                        <div>{{numberExchange(winPrize.data.val)  }}</div>
                    </div>
                </div>
                <div class="winAPrizeBottom">
                    <!-- <div class="winAPrizeBottomL">
                        <img src="../../assets/img/header/money.png" alt="">
                        <div> {{$t('msg.message.exchange')}}{{numberExchange(winPrize.data.val)  }}</div>
                    </div> -->
                    <div class="winAPrizeBottomR" @click="oneMoreGet">
                        {{$t('msg.message.DrawAgain')}}
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<style scoped>
.change1 {
    position: absolute;
    left: -120px;
    bottom: 141px;
}

.change1 img {
    bottom: -37px;
}

.change2 img {
    bottom: -37px;
}

.change3 img {
    bottom: -37px;
}

.change4 img {
    bottom: -37px;
}
.pad10{
    padding: 7px 10px;
}
.changeBigs {
    top: 50%;
    left: 50%;
    z-index: 0;
   width: 50%;
    transform: translate(-50%, -50%);
}

.changeImgs {
    position: absolute !important;
    top: -21px !important;
    left: 20px !important;
    width: 40px !important;
}

.eggmbody {
    /* left: 593px; */
    top: 36px;
    width: 703px;
}

.change2 {
    position: absolute;
    left: -14px;
    bottom: 146px;
}

.change3 {
    position: absolute;
    left: -67px;
    bottom: 106px;
}

.change4 {
    position: absolute;
    left: 35px;
    bottom: 106px;
}

.homeBody {
    padding-bottom: 50px;
    overflow-x: hidden;
    max-width: 2560px;
    min-width: 1200px;
    /* height: 100vh; */
    /* padding-bottom: 50px; */
    overflow-y: auto;
    /* background-color: #0F123F; */
    background: url('../../assets/img/home/bg.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    padding-top: 101px;
    margin: 0 auto;
}

.blueEggBot {
    width: 78px !important;
}

.raffleBig {
    max-width: 2560px;
    color: #fff;
    position: relative;
}

.raffleBigBanner {
    width: 100%;
    height: 819px;
}

.raffle {
    display: flex;
    justify-content: center;
}


.raffleTop {
    display: flex;
    justify-content: center;
    position: relative;
}

.eggBtn {
    width: 359px;
    position: absolute;
    bottom: 95px;
    cursor: pointer;
}

.eggBtnItem {
    display: flex;
    color: #fff;
    font-size: 20px;
    width: 359px;
    position: absolute;
    bottom: 189px;
}
.eggBtnItemBig {
    display: flex;
    color: #fff;
    font-size: 20px;
    /* position: relative; */
    width: 359px;
    position: absolute;
    left: 1044px;
    bottom: 169px;
}
.eggBtnItemBig img {
    width: 260px !important;
    height: 80px;
}
.eggBtnItemBig div {
    position: absolute;
    top: 20px;
    left: 22px;
}
.eggBtnItem img {
  width: 100%;
  height: 100%;
}

.eggBtnItem div {
    position: absolute;
    top: 10px;
    width: 100%;
  height: 100%;
  text-align: center;

}
.eggBtnItem{
    width: 157px;
    height: 57px;
}

.raffleBot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 285px;
    height: 41px;
    position: absolute;
    bottom: 45px;
    background: rgba(255, 255, 255, .3);
    border-radius: 35px;
    padding: 5px 17px;
}
.raffleBotBig {
    width: 335px !important;
    /* left: 768px !important; */
}
.raffleBotL {
    display: flex;
    align-items: center;
}

.raffleBotL div {
    font-size: 20px;
}

.raffleBotL img {
    width: 41px;
    height: 41px;
}

.raffleBotR {
    font-size: 20px;
    display: flex;
    align-items: center;
}

.raffleBotR div {
    /* padding-right: 25px; */
}

.raffleBotR img {}

.blackBg {
    position: absolute;
    width: 320px;
    top: 292px;
    left: -12px;
    height: 76px;
}

.nowW600{
    width: 1070px !important;
}


.nowEggPng{
    position: relative;
    /* width: 356px; */
    display: flex;
    width: 80%;
    /* margin-left: 240px; */
    flex-direction: column;
    font-size: 44px;
}
.nowEggPng img {
    width:97px;
}
.jiantoubox{
    display: flex;
    align-items: center;
    width: 675px;
    justify-content: space-between;
}
.jiantou{
    margin-left: 15px;
    width: 100px !important;
}
.realTime{
    font-size: 13px;
    padding-top: 3px;
    padding-left: 2px;
    color: #fff !important;
}
.nowEggPngDiv{
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 76px;
    font-size: 40px;
    top: 15px;
}
.searchBoxBig {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.imgBox {
    width: 60px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(143.13deg, #27D698 23.41%, #5BCE3A 85.53%);

}

.selectClass>>>.el-select__placeholder {
    color: #fff !important;
}

.modelTop {
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin: 0 180px;
    padding-top: 45px;
    align-items: center;
    width: calc(100% - 360px);
    flex-wrap: wrap;
}

.padtop40 {
    padding-top: 40px;
}

.modelTopL {
    display: flex;
    align-items: center;
}

.modelTopL img {
    width: 356px;
}

.selectModel {
    display: flex;
    align-items: center;
    width: 510px;
    justify-content: space-between;
}

.searchBox {
    display: flex;
    /* border-radius: 8px; */
    /* padding: 5px 15px; */
    width: 342px;
    justify-content: space-between;
    height: 54px;
    background: #282828;
}

.searchBox>>>.el-input__wrapper {
    background: transparent !important;
    /* border: 1px solid #ffffff45; */
    box-shadow: unset !important;
    /* color: #fff !important; */
    /* border-radius: 3px; */
}

:deep(.el-input__inner::placeholder) {
    color: #fff
}

.searchBox>>>.el-input__inner {
    color: #fff;

}

.searchBox input {
    width: 81%;
    background: transparent;
    border: unset;
    color: #fff;
}

.searchBox img {
    width: 34px;
}


.modelTopLLine {
    background: #fff;
    width: 4px;
    height: 34px;
    border-radius: 2px;
    margin-right: 15px;
}

.modelTopRText {
    font-size: 32px;
}

.selectClass {
    width: 335px !important;
    height: 54px !important;
    padding-right: 24px;
}

.selectClass>>>.el-select__wrapper {
    height: 100%;
    background: #282828;
    box-shadow: 0 0 0 1px #282828;
    border-radius: 0px;

}

.eggSortInfo {
    display: flex;
    margin: 0 240px;
    margin-top: 24px;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    max-width: 2560px;
    flex-wrap: wrap;
}

.eggSortInfoitem {
    display: flex;
    flex-direction: column;
    padding: 17px 17px;
    /* background: url('../../assets/img/home/eggBg.png'); */
    margin-bottom: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 295px;
    height: 348px;
    position: relative;
    align-items: center;
    background: #282B29;
    margin-right: 25px;
    cursor: pointer;
}

.eggSortInfoitemImg {
    width: 285px;
    /* background: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 11px;
    /* border-radius: 6px; */
    /* padding-top: 50px; */
    height: 274px;
    background: #0F0F0F;
}

.eggSortInfoitemImg img {
    height: 47%;
}

.eggSortInfoitemMsg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-top: 20px; */
    width: 100%;
    position: relative;
}

.eggSortInfoitemMsgL {
    display: flex;
    flex-direction: column;
    padding-left: 9px;
    position: absolute;
    top: -3px;
    z-index: 10;
    width: 100%;

}

.eggSortInfoitemMsgLText {
    font-size: 16px;
    color: #fff;
    height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    width: 94%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.eggSortInfoitemMsgLBottom {
    display: flex;
    align-items: center;
}

.eggSortInfoitemMsgLBottom img {
    width: 16px;
    margin-right: 4px;
}

.eggSortInfoitemMsgLBottom div {
    font-size: 16px;
    color: #F6AE41;
}

.findMoreBtn {
    font-size: 20px;
    color: #fff;
    border: 1px solid;
    display: flex;
    height: 38px;
    align-items: center;
    padding: 4px 15px;
    /* border-radius: 36px; */
    cursor: pointer;
    /* width: 146px; */
    height: 54px;
    /* border-radius: 8px; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 2px solid #27D698;
}

.levelImgBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 105.5%;
    position: absolute;
    top: -10px;
    left: -18px;
}

.levelImgBox img {
    width: 106px;
}

.levelImgBox div {
    font-size: 14px;
    font-weight: 400;
    /* padding-right: 35px; */
    white-space: nowrap;
    color: #fff;
}

.imgleave {
    position: relative;
    font-size: 28px;
    color: #fff;
}

.imgleave div {
    position: absolute;
    top: 11px;
    right: 18px;
    font-size: 20px;
}

/* 充值弹窗遮罩层 */
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 663px;
    height: 568px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url('../../assets/img/raffle/getPre.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.winAPrizeBig {
    width: 68%;
    position: relative;
    top: 148px;
    left: 5px;

}

.winAPrizeTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: relative;
    top: -22px;
}

.winAPrizeTop div {
    font-size: 24px;
    /* background: #FF6915; */
    color: #FF6915;
}

.winAPrizeTop img {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.winAPrizeImg {}

.winAPrizeImg img {
    height: 162px;
}

.winAPrizeMain {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, .3);
    padding: 10px 28px;
    width: 85.5%;
    position: relative;
    top: 18px;
    left: 8px;
}

.winAPrizeName {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.winAPrizeMoney {
    display: flex;
    align-items: center;
}

.winAPrizeMoney div {}

.winAPrizeMoney img {
    width: 28px;
}

.winAPrizeBottom {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 17px 15px;
    padding-top: 30px;
}

.winAPrizeBottomL {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid;
    border-radius: 4px;
    margin-right: 12px;
    cursor: pointer;

}

.winAPrizeBottomL div {}

.winAPrizeBottomL img {
    width: 18px;
}

.winAPrizeBottomR {
    background: linear-gradient(277.87deg, #FFB420 19.56%, #FEF571 122.67%);
    color: #000;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}


.choujianBox {
    display: flex;
    justify-content: center;
}

.choujianBox img {
    position: absolute;
}

.falaliBox {
    position: absolute;
    top: 95px;
}

.falaliBox img {}

.botImgBox {
    position: absolute;
    top: 500px;
    display: flex;
    justify-content: center;
}

.botImgBoxs {}

.botImgBoxs img {}

.fala {
    position: absolute;
    top: 61px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex; 
    justify-content: center;
    align-items: center;
    /* width: 216px; */
    text-align: center;
}


.fala div {
    font-size: 24px;
    position: relative;
    width: 100%;
    bottom: 3px;
    padding: 10px 50px;
    background: #B954EE;
    border-radius: 30px;
    /* display: flex; */
    /* top: 8px; */
    /* overflow: hidden; */
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
    /* left: 30px; */
    /* width: 85%; */
    /* left: 17px; */
}

.changeTop {
    animation: test 2s linear;
}

.changeTop2 {
    animation: test2 2s linear;
}

.changeBig {
    animation: test3 2s linear;
}

.changeBig2 {
    animation: test4 2s linear;
}

.changeBig2s {
    position: relative !important;
    width: 208px !important;
    top: 162px !important;
    left: -64px !important;
}

.changeBig2ss {
    position: relative !important;
    width: 208px !important;
    left: 397px !important;
    top: 168px !important;
}

.changeBig2sss {
    position: relative !important;
    left: -533px !important;
    width: 163px !important;
    height: 163px;
}

.changeBig2ssa {
    position: relative !important;
    right: -131px !important;
    width: 163px !important;
    height: 163px;
}
.pl5{
    padding-left: 5px;
}
@keyframes test {
    0% {
        bottom: 106px;
    }

    25% {
        bottom: 126px;
    }

    50% {
        bottom: 106px;
    }

    75% {
        bottom: 126px;
    }

    100% {
        bottom: 106px;
    }
}

@keyframes test2 {
    0% {
        bottom: 141px;
    }

    25% {
        bottom: 121px;
    }

    50% {
        bottom: 141px;
    }

    75% {
        bottom: 121px;
    }

    100% {
        bottom: 141px;
    }
}

@keyframes test3 {
    0% {

        transform: translate(-50%, -50%) rotate(0deg);
    }

    25% {

        transform: translate(-50%, -50%) rotate(360deg);
    }

    50% {

        transform: translate(-50%, -50%) rotate(720deg);
    }

    75% {

        transform: translate(-50%, -50%) rotate(1080deg);
    }

    100% {

        transform: translate(-50%, -50%) rotate(1440deg);
    }
}

@keyframes test4 {
    0% {

        transform: rotate(0deg);
    }

    25% {

        transform: rotate(360deg);
    }

    50% {

        transform: rotate(720deg);
    }

    75% {

        transform: rotate(1080deg);
    }

    100% {

        transform: rotate(1440deg);
    }
}
@media (min-width: 2133px){
    .eggSortInfo{
        margin: 0 209px;
    }
}
@media screen and (max-width:1600px){
    .modelTop{
        margin: 0 60px;
        flex-wrap: nowrap;
        width: 1037px;
    }
    .eggSortInfo{
        margin: 0 60px;
    }
    .homeBody{
        padding-top: 81px;
    }
}
</style>
